<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-09-14 15:36:39
 * @LastEditTime: 2023-10-15 21:01:42
 * @LastEditors: ''
-->
<template>
  <div>
    <div class="demo-inner-divider">backtop -basic</div>
    <div class="explainText">通过滑动来查看容器右下角的按钮。</div>
    <e-backtop :target="'.router-content'" :right="150" :bottom="150" @click="backTopClick" />

    <div class="demo-inner-divider">backtop -自定义backtop</div>
    <div class="explainText">通过滑动来查看容器右下角的按钮。</div>
    <e-backtop :target="'.router-content'" :bottom="50">
      <template #icon>
        <div
          style="
            height: 100%;
            width: 100%;
            background-color: #fff;
            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          "
        >
          UP
        </div>
      </template>
    </e-backtop>
  </div>
  <backtop-md class="markdown-body"></backtop-md>
</template>

<script>
import backtopMd from "../../docs/backtop.md"
export default {
  components:{
    backtopMd
  },
  methods:{
    backTopClick(e){
      console.log('backtop')
    }
  }
}
</script>

<style>
.explainText{
  font-size: 18px;
  margin-top:100px;
  margin-bottom: 100px;
}
</style>